使用浮动层：如何展示对话框，并给对话框传递参数？#

<div className="main-layout">  
  <Sider />  
  <UserList />  
</div>

function MainLayout() {  
  const [modalVisible, setModalVisible] = useState(false);  
  const [user, setUser] = useState(null);  
  const showUserModal = (user) => {  
    setModalVisible(true);  
    setUser(user);  
  }  
  return (  
    <div className="main-layout">  
      <Sider onNewUser={showUserModal}/>  
      <UserList onEditUser={user => showUserModal(user)}/>  
      <UserInfoModal visible={modalVisible} user={user} />  
    </div>  
  );  
}

const modalReducer = (state = { hiding: {} }, action) => {  
  switch (action.type) {  
    case "nice-modal/show":  
      const { modalId, args } = action.payload;  
      return {  
        ...state,  
        // 如果存在 modalId 对应的状态，就显示这个对话框  
        [modalId]: args || true,  
        // 定义一个 hiding 状态用于处理对话框关闭动画  
        hiding: {  
          ...state.hiding,  
          [modalId]: false,  
        },  
      };  
    case "nice-modal/hide":  
     const { modalId, force } = action.payload;  
      // 只有 force 时才真正移除对话框  
      return action.payload.force  
        ? {  
            ...state,  
            [modalId]: false,  
            hiding: { [modalId]: false },  
          }  
        : { ...state, hiding: { [.modalId]: true } };  
    default:  
      return state;  
  }  
};

// 使用 action creator 来创建显示和隐藏对话框的 action  
function showModal(modalId, args) {  
  return {  
    type: "nice-modal/show",  
    payload: {  
      modalId,  
      args,  
    },  
  };  
}  
  
function hideModal(modalId, force) {  
  return {  
    type: "nice-modal/hide",  
    payload: {  
      modalId,  
      force,  
    },  
  };  
}  
  
// 创建自定义 Hook 用于处理对话框逻辑  
export const useNiceModal = (modalId) => {  
  const dispatch = useDispatch();  
  // 封装 Redux action 用于显示对话框  
  const show = useCallback((args) => {  
    dispatch(showModal(modalId, args));  
  }, [  
    dispatch,  
    modalId,  
  ]);  
  // 封装 Redux action 用于隐藏对话框  
  const hide = useCallback((force) => {  
    dispatch(hideModal(modalId, force));  
  }, [  
    dispatch,  
    modalId,  
  ]);  
  
  const args = useSelector((s) => s[modalId]);  
  const hiding = useSelector((s) => s.hiding[modalId]);  
  
  // 只要有参数就认为对话框应该显示，如果没有传递 args，在reducer 中会使用  
  // 默认值 true  
  return { args, hiding, visible: !!args, show, hide };  
};

function NiceModal({ id, children, ...rest }) {  
  const modal = useNiceModal(id);  
  return (  
    <Modal  
      onCancel={() => modal.hide()} // 默认点击 cancel 时关闭对话框  
      onOk={() => modal.hide()} // 默认点击确定关闭对话框  
      afterClose={() => modal.hide(true)} // 动画完成后真正关闭  
      visible={!modal.hiding}  
      {...rest} // 允许在使用 NiceModal 时透传参数给实际的 Modal  
    >  
      {children}  
    </Modal>  
  );  
}

export const createNiceModal = (modalId, Comp) => {  
  return (props) => {  
    const { visible, args } = useNiceModal(modalId);  
    if (!visible) return null;  
    return <Comp {...args} {...props} />;  
  };  
};

import { Button } from "antd";  
import NiceModal, {  
  createNiceModal,  
  useNiceModal,  
} from "./NiceModal";  
  
const MyModal = createNiceModal("my-modal", () => {  
  return (  
    <NiceModal id="my-modal" title="Nice Modal">  
      Hello NiceModal!  
    </NiceModal>  
  );  
});  
  
function MyModalExample() {  
  const modal = useNiceModal("my-modal");  
  return (  
    <>  
      <Button type="primary" onClick={() => modal.show()}>  
        Show Modal  
      </Button>  
      <MyModal />  
    </>  
  );  
}

const modal = useNiceModal('my-modal');  
// 实现一个 promise API 来处理返回值  
modal.show(args).then(result => {});

// 事实上，要实现这样一个机制并不困难，就是在 useNiceModal 这个 Hook 的实现中提供一个 modal.resolve 这样的方法，能够去 resolve modal.show 返回的 Promise。

// 实现的代码思路如下所示：

const modal = useNiceModal('my-modal');  
// 实现一个 promise API 来处理返回值  
modal.show(args).then(result => {});

// 使用一个 object 缓存 promise 的 resolve 回调函数  
const modalCallbacks = {};  
export const useNiceModal = (modalId) => {  
  const dispatch = useDispatch();  
  const show = useCallback(  
    (args) => {  
      return new Promise((resolve) => {  
        // 显示对话框时，返回 promise 并且将 resolve 方法临时存起来  
        modalCallbacks[modalId] = resolve;  
        dispatch(showModal(modalId, args));  
      });  
    },  
    [dispatch, modalId],  
  );  
  const resolve = useCallback(  
    (args) => {  
      if (modalCallbacks[modalId]) {  
        // 如果存在 resolve 回调函数，那么就调用  
        modalCallbacks[modalId](args);  
        // 确保只能 resolve 一次  
        delete modalCallbacks[modalId];  
      }  
    },  
    [modalId],  
  );  
    
  // 其它逻辑...  
  
  // 将 resolve 也作为返回值的一部分  
  return { show, hide, resolve, visible, hiding };  
};